<template>
    <div style="margin-left: 30px;margin-top: 60px;">
        <span style="color: #1890FF;font-size: 20px;font-weight: bold;margin-right: 60px;">深加工信息</span>
        <el-button type="info" @click="form.dialogFormVisible = true">设置</el-button>
        <hr style="margin-top: 40px;margin-bottom: 40px;">
        <div style="margin-bottom: 40px;">
            <span v-if="form.ProcessIsdeleted == false"
                style="color: #797979;font-size: 16px;font-weight: bold;">暂无数据，请点击设置添加数据</span>
            <table v-else style="width: 60%;">
                <tr style="height: 40px;">
                    <td>班组：{{ ProcessFind.processClass }}</td>
                    <td>负责人：{{ ProcessFind.processPeople }}</td>
                </tr>
            </table>
        </div>
        <span style="color: #1890FF;font-size: 20px;font-weight: bold;margin-right: 60px;">相关资质</span>
        <hr style="margin-top: 40px;margin-bottom: 40px;">
        <div>
            <el-upload v-model:file-list="fileListCultivation" action="https://localhost:7169/api/Good/LoadImages"
                list-type="picture-card" :limit="9" :on-remove="handleRemove" :on-exceed="exceedImages"
                :on-success="successImages">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>

        </div>
        <span style="color: #1890FF;font-size: 20px;font-weight: bold;margin-right: 60px;">供应商信息</span>
        <el-button type="info" @click="form.dialogFormVisible1 = true">设置</el-button>
        <hr style="margin-top: 40px;margin-bottom: 40px;">
        <div style="margin-bottom: 40px;">
            <span v-if="form.SupplierIsDeleted == false"
                style="color: #797979;font-size: 16px;font-weight: bold;">暂无数据，请点击设置添加数据</span>
            <table v-else style="width: 60%;">
                <tr style="height: 40px;">
                    <td>生产批次：{{ SupplierFind.supplierLot }}</td>
                </tr>
            </table>
        </div>
        <span style="color: #1890FF;font-size: 20px;font-weight: bold;margin-right: 60px;">相关材料</span>
        <hr style="margin-top: 40px;margin-bottom: 40px;">
        <div>
            <el-upload v-model:file-list="fileListCultivationSupplier"
                action="https://localhost:7169/api/Good/LoadImages" list-type="picture-card" :limit="9"
                :on-remove="handleRemove" :on-exceed="exceedImages" :on-success="SuccessSupplierImages">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>

        </div>
        <span style="color: #1890FF;font-size: 20px;font-weight: bold;margin-right: 60px;">企业信息</span>
        <el-button type="info" @click="form.dialogFormVisible2 = true">设置</el-button>
        <hr style="margin-top: 40px;margin-bottom: 40px;">
        <div style="margin-bottom: 40px;">
            <span v-if="form.EnterpriseIsDeleted == false"
                style="color: #797979;font-size: 16px;font-weight: bold;">暂无数据，请点击设置添加数据</span>
            <table v-else style="width: 60%;">
                <tr style="height: 40px;">
                    <td>公司名称：{{ ProcessEnterpriseFind.processEnterpriseName }}</td>
                    <td>生产许可证号：{{ ProcessEnterpriseFind.processEnterpriseNoSc }}</td>
                </tr>
            </table>
        </div>
        <span style="color: #1890FF;font-size: 20px;font-weight: bold;margin-right: 60px;">相关材料</span>
        <hr style="margin-top: 40px;margin-bottom: 40px;">
        <div>
            <el-upload v-model:file-list="fileListCultivationEnterprise"
                action="https://localhost:7169/api/Good/LoadImages" list-type="picture-card" :limit="9"
                :on-remove="handleRemove" :on-exceed="exceedImages" :on-success="SuccessProcessEnterpriseImages">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>

        </div>
    </div>
    <!-- 加工添加弹框 -->
    <div>
        <el-dialog v-model="form.dialogFormVisible" title="养殖信息" width="500">
            <el-form :model="ProcessFind">
                <el-form-item label="班组：" :label-width="140">
                    <el-input v-model="ProcessFind.processClass" autocomplete="off" placeholder="请填写班组" />
                </el-form-item>
                <el-form-item label="负责人：" :label-width="140">
                    <el-input v-model="ProcessFind.processPeople" autocomplete="off" placeholder="请填写负责人" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <!-- <el-button @click="escData()">取消</el-button> -->
                    <el-button v-if="form.ProcessIsdeleted == false" type="success" @click="addProcess()">
                        保存
                    </el-button>
                    <el-button v-else type="primary" @click="updateProcess()">
                        修改
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <!-- 供应商添加弹框 -->
    <div>
        <el-dialog v-model="form.dialogFormVisible1" title="供应商信息" width="500">
            <el-form :model="SupplierFind">
                <el-form-item label="生产批次：" :label-width="140">
                    <el-input v-model="SupplierFind.supplierLot" autocomplete="off" placeholder="请填写生产批次" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <!-- <el-button @click="escData()">取消</el-button> -->
                    <el-button v-if="form.SupplierIsDeleted == false" type="success" @click="addSupplier()">
                        保存
                    </el-button>
                    <el-button v-else type="primary" @click="updateSupplier()">
                        修改
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <!-- 加工企业添加弹框 -->
    <div>
        <el-dialog v-model="form.dialogFormVisible2" title="企业信息" width="500">
            <el-form :model="ProcessEnterpriseFind">
                <el-form-item label="公司名称：" :label-width="140">
                    <el-input v-model="ProcessEnterpriseFind.processEnterpriseName" autocomplete="off" placeholder="请填写公司名称" />
                </el-form-item>
                <el-form-item label="生产许可证号：" :label-width="140">
                    <el-input v-model="ProcessEnterpriseFind.processEnterpriseNoSc" autocomplete="off" placeholder="请填写生产许可证号" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <!-- <el-button @click="escData()">取消</el-button> -->
                    <el-button v-if="form.EnterpriseIsDeleted == false" type="success" @click="addProcessEnterprise()">
                        保存
                    </el-button>
                    <el-button v-else type="primary" @click="updateProcessEnterprise()">
                        修改
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore();
const router = useRouter();
const route = useRoute();
const form = reactive({
    goodId: store.GoodId,
    ProcessIsdeleted: false,
    SupplierIsDeleted: false,
    EnterpriseIsDeleted: false,


    dialogFormVisible: false,
    dialogFormVisible1: false,
    dialogFormVisible2: false,
})
const ProcessFind = ref({
    processId: '',
    processClass: '',
    processPeople: '',
    goodId: form.goodId,
})
//加工反填
const getProcessFind = () => {
    axios.get(`https://localhost:7169/api/Good/GetProcessFind?goodId=${form.goodId}`)
        .then(res => {
            // console.log(res.data)
            if (res.data != "") {
                ProcessFind.value = res.data
                form.ProcessIsdeleted = true
                ProcessImages()
            }
        })
        .catch(err => {


            console.log(err)
        })
}
//添加加工
const addProcess = () => {
    console.log(ProcessFind.value)
    axios.post('https://localhost:7169/api/Good/AddProcess', ProcessFind.value)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success('添加成功')
                // form.CultivationIsDeleted = true
                form.dialogFormVisible = false
                getProcessFind()
            }
            else {
                ElMessage.error('添加失败')
            }
        })
}
//修改加工
const updateProcess = () => {
    // getCultivationFind()
    axios.post('https://localhost:7169/api/Good/UpdateProcess', ProcessFind.value)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success('修改成功')
                form.dialogFormVisible = false
                getProcessFind()
            }
            else {
                ElMessage.error('修改失败')
            }
        })
}
//反填加工信息图片
const ProcessImages = () => {
    // console.log(CultivationFind.value)
    axios.get(`https://localhost:7169/api/Good/GetT_Images?Id=${ProcessFind.value.processId}`)
        .then(res => {
            console.log(res.data)
            fileListCultivation.value = []
            if (res.data.length > 0) {

                res.data.forEach((c: any) => {
                    fileListCultivation.value.push({ name: c.imageId, url: c.imageAddress })
                });

            }
        })
}

//上传成功加工
const successImages = ((response: any) => {
    if (ProcessFind.value.processId == '') {
        ElMessage.error('请先添加加工信息')
        return
    }
    // console.log(response)
    let Url = 'https://localhost:7169/' + response
    axios.get(`https://localhost:7169/api/Good/AddImage?Id=${ProcessFind.value.processId}&Url=${Url}`)
        .then(res => {
            ElMessage.success('上传成功')
        })
        .catch(err => {
            // ElMessage.error('上传失败')

            console.log(err)
        })
    fileListCultivation.value.forEach((c: any) => {
        if (c.response == response) {
            c.url = Url
            return
        }
    });
    // console.log(fileListCultivation)

}
)
//供应商
const SupplierFind = ref({
    supplierId: '',
    supplierLot: '',
    goodId: form.goodId,
})
//供应商反填
const getSupplierFind = () => {
    axios.get(`https://localhost:7169/api/Good/GetSupplierFind?goodId=${form.goodId}`)
        .then(res => {
            console.log(res.data)
            if (res.data != "") {
                SupplierFind.value = res.data
                form.SupplierIsDeleted = true
                SupplierImages()
            }
        })
        .catch(err => {


            console.log(err)
        })
}
//添加供应商
const addSupplier = () => {
    console.log(ProcessFind.value)
    axios.post('https://localhost:7169/api/Good/AddSupplier', SupplierFind.value)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success('添加成功')
                // form.CultivationIsDeleted = true
                form.dialogFormVisible1 = false
                getSupplierFind()
            }
            else {
                ElMessage.error('添加失败')
            }
        })
}
//修改供应商
const updateSupplier = () => {
    // getCultivationFind()
    axios.post('https://localhost:7169/api/Good/UpdateProcess', SupplierFind.value)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success('修改成功')
                form.dialogFormVisible1 = false
                getSupplierFind()
            }
            else {
                ElMessage.error('修改失败')
            }
        })
}
//反填供应商信息图片
const SupplierImages = () => {
    // console.log(CultivationFind.value)
    axios.get(`https://localhost:7169/api/Good/GetT_Images?Id=${SupplierFind.value.supplierId}`)
        .then(res => {
            console.log(res.data)
            fileListCultivationSupplier.value = []
            if (res.data.length > 0) {

                res.data.forEach((c: any) => {
                    fileListCultivationSupplier.value.push({ name: c.imageId, url: c.imageAddress })
                });

            }
        })
}

//上传成功供应商
const SuccessSupplierImages = ((response: any) => {
    if (SupplierFind.value.supplierId == '') {
        ElMessage.error('请先添加加工信息')
        return
    }
    // console.log(response)
    let Url = 'https://localhost:7169/' + response
    axios.get(`https://localhost:7169/api/Good/AddImage?Id=${SupplierFind.value.supplierId}&Url=${Url}`)
        .then(res => {
            ElMessage.success('上传成功')
        })
        .catch(err => {
            // ElMessage.error('上传失败')

            console.log(err)
        })
    fileListCultivationSupplier.value.forEach((c: any) => {
        if (c.response == response) {
            c.url = Url
            return
        }
    });
    // console.log(fileListCultivationSupplier)

}
)
//加工企业
const ProcessEnterpriseFind = ref({
    processEnterpriseId: '',
    processEnterpriseName: '',
    processEnterpriseNoSc: '',
    goodId: form.goodId,
})
//加工企业反填
const getProcessEnterpriseFind = () => {
    axios.get(`https://localhost:7169/api/Good/GetProcessEnterpriseFind?goodId=${form.goodId}`)
        .then(res => {
            console.log(res.data)
            if (res.data != "") {
                ProcessEnterpriseFind.value = res.data
                form.EnterpriseIsDeleted = true
                ProcessEnterpriseImages()
            }
        })
        .catch(err => {


            console.log(err)
        })
}
//添加加工企业
const addProcessEnterprise = () => {
    console.log(ProcessFind.value)
    axios.post('https://localhost:7169/api/Good/AddProcessEnterprise', ProcessEnterpriseFind.value)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success('添加成功')
                // form.CultivationIsDeleted = true
                form.dialogFormVisible2 = false
                getProcessEnterpriseFind()
            }
            else {
                ElMessage.error('添加失败')
            }
        })
}
//修改加工企业
const updateProcessEnterprise = () => {
    // getCultivationFind()
    axios.post('https://localhost:7169/api/Good/UpdateProcessEnterprise', ProcessEnterpriseFind.value)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success('修改成功')
                form.dialogFormVisible2 = false
                getProcessEnterpriseFind()
            }
            else {
                ElMessage.error('修改失败')
            }
        })
}
//反填加工企业信息图片
const ProcessEnterpriseImages = () => {
    // console.log(CultivationFind.value)
    axios.get(`https://localhost:7169/api/Good/GetT_Images?Id=${ProcessEnterpriseFind.value.processEnterpriseId}`)
        .then(res => {
            console.log(res.data)
            fileListCultivationEnterprise.value = []
            if (res.data.length > 0) {

                res.data.forEach((c: any) => {
                    fileListCultivationEnterprise.value.push({ name: c.imageId, url: c.imageAddress })
                });

            }
        })
}

//上传成功加工企业
const SuccessProcessEnterpriseImages = ((response: any) => {
    if (ProcessEnterpriseFind.value.processEnterpriseId == '') {
        ElMessage.error('请先添加加工企业信息')
        return
    }
    // console.log(response)
    let Url = 'https://localhost:7169/' + response
    axios.get(`https://localhost:7169/api/Good/AddImage?Id=${SupplierFind.value.supplierId}&Url=${Url}`)
        .then(res => {
            ElMessage.success('上传成功')
        })
        .catch(err => {
            // ElMessage.error('上传失败')

            console.log(err)
        })
    fileListCultivationEnterprise.value.forEach((c: any) => {
        if (c.response == response) {
            c.url = Url
            return
        }
    });
    // console.log(fileListCultivationEnterprise)

}
)
onMounted(() => {
    getProcessFind()
    getSupplierFind()
})
// 上传图片
import type { UploadProps, UploadUserFile } from 'element-plus'

const fileListCultivation = ref<UploadUserFile[]>([
])
const fileListCultivationEnterprise = ref<UploadUserFile[]>([
])
const fileListCultivationSupplier = ref<UploadUserFile[]>([
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
//删除图片
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    let Url = uploadFile.url
    console.log(Url)

    axios.get(`https://localhost:7169/api/Good/DeletedImages?Url=${Url}`)
        .then(res => {
            ElMessage.success('删除成功')
        })
        .catch(err => {
            ElMessage.error('删除失败')

            console.log(err)
        })
}
//上传图片限制
const exceedImages = () => {
    ElMessage.error('最多上传9张图片')
}
</script>